
<template>
    <div class="vdialog">
        <el-dialog :title="menuDialog.title" :close-on-click-modal="false" :close-on-press-escape="false" :visible="menuDialog.isShow" :destroy-on-close="true" :show-close="false" :modal-append-to-body="false"	>
            <template v-if="menuDialog.title == '请输入手机验证码'">
                <el-form ref="menuDialog" :model="menuDialog" >
                    <el-form-item
                        :rules="[
                            { required: true, message: '请输入手机验证码', trigger: 'blur' },
                        ]"
                        prop="keyWord"
                    >
                        <el-input v-model="menuDialog.keyWord" style="width:65%" placeholder="请输入"/>
                    </el-form-item>
                    <span v-if="menuDialog.errMessage" style="color:red">{{ menuDialog.errMessage }}</span>
                </el-form>
                <span slot="footer" >
                    <el-button type="primary" @click.native="confirmForm">确认</el-button>
                </span>
            </template>
            <template v-else>
                <span>该功能需要二次验证，您验证失败，请联系管理员处理。</span>
            </template>
        </el-dialog>
        <el-collapse v-model="menus.activeMenu" accordion class="menu-collapse">
            <el-collapse-item v-for="(menu, i) in menus.menuItems" :key="i" :name="String(menu.authId)">
                <template slot="title">
                    <img v-if="menu.authCode" :src="'/static/images/icon/'+ menu.authCode+'.png'" alt="authCode" class="icon-image">
                    <span style="line-height: 18px;margin-left:8px;font-size:16px;color:#2B3B4E;">{{ language=='en'?menu.authNameEn:menu.authNameCh }}</span>
                </template>
                <el-menu :default-active="menus.activeSubMenu.toString()" style="width:240px;">
                    <template v-for="(submenus, index) in menu.children">
                        <el-menu-item v-if="!submenus.children" :index="i+'-'+index" :key="i+'-'+index">
                            <a
                                v-if="submenus.urlPath=='/personalPlanDetail'"
                                @click="findStudentId"
                            >{{ language=='en'?submenus.authNameEn:submenus.authNameCh }}</a>
                            <router-link
                                v-else
                                :to="{path:submenus.urlPath ? submenus.urlPath : '',query:{t:Date.now()}}"
                            >{{ language=='en'?submenus.authNameEn:submenus.authNameCh }}</router-link>
                        </el-menu-item>
                        <template v-else>
                            <div :key="i+'-'+index">
                                <el-submenu :index="i+'-'+index" popper-class="aaa">
                                    <template slot="title">{{ language=='en'?submenus.authNameEn:submenus.authNameCh }}</template>
                                    <template v-for="(item, subIndex) in submenus.children">
                                        <el-menu-item v-if="!item.children" :index="i+'-'+index+'-'+subIndex" :key="i+'-'+index+'-'+subIndex">
                                            <router-link
                                                :to="item.urlPath ? item.urlPath : ''"
                                            >{{ language=='en'?item.authNameEn:item.authNameCh }}</router-link>
                                        </el-menu-item>
                                        <template v-else>
                                            <div style="padding-left:8px;">
                                                <el-submenu :index="i+'-'+index+'-'+subIndex" :key="index" popper-class="aaa" >
                                                    <template slot="title">{{ language=='en'?item.authNameEn:item.authNameCh }}</template>
                                                    <template
                                                        v-for="(third_grade_item, third_grade_subIndex) in item.children"
                                                    >
                                                        <el-menu-item v-if="!third_grade_item.children" :index="i+'-'+index+'-'+subIndex+'-'+third_grade_subIndex" :key="i+'-'+index+'-'+subIndex+'-'+third_grade_subIndex">
                                                            <router-link
                                                                :to="third_grade_item.urlPath ? third_grade_item.urlPath : ''"
                                                            >{{ language=='en'?third_grade_item.authNameEn:third_grade_item.authNameCh }}</router-link>
                                                        </el-menu-item>
                                                        <template v-else>
                                                            <div style="padding-left:8px;">
                                                                <el-submenu
                                                                    :index="i+'-'+index+'-'+subIndex+'-'+third_grade_subIndex"
                                                                    :key="index"
                                                                    popper-class="aaa"
                                                                >
                                                                    <template
                                                                        slot="title"
                                                                    >{{ language=='en'?third_grade_item.authNameEn:third_grade_item.authNameCh }}</template>
                                                                    <template
                                                                        v-for="(fourth_grade_item, fourth_grade_subIndex) in third_grade_item.children"
                                                                    >
                                                                        <el-menu-item
                                                                            v-if="!fourth_grade_item.children"
                                                                            :index="i+'-'+index+'-'+subIndex+'-'+third_grade_subIndex+'-'+fourth_grade_subIndex"
                                                                            :key="i+'-'+index+'-'+subIndex+'-'+third_grade_subIndex+'-'+fourth_grade_subIndex"
                                                                        >
                                                                            <router-link
                                                                                :to="fourth_grade_item.urlPath ? fourth_grade_item.urlPath : ''"
                                                                            >{{ language=='en'?fourth_grade_item.authNameEn:fourth_grade_item.authNameCh }}</router-link>
                                                                        </el-menu-item>
                                                                        <template v-else>
                                                                            <div
                                                                                style="padding-left:8px;"
                                                                            >
                                                                                <el-submenu
                                                                                    :index="i+'-'+index+'-'+subIndex+'-'+third_grade_subIndex+'-'+fourth_grade_subIndex"
                                                                                    :key="index"
                                                                                    popper-class="aaa"
                                                                                >
                                                                                    <template
                                                                                        slot="title"
                                                                                    >{{ language=='en'?fourth_grade_item.authNameEn:fourth_grade_item.authNameCh }}</template>
                                                                                    <template
                                                                                        v-for="(fifth_grade_item, fifth_grade_subIndex) in fourth_grade_item.children"
                                                                                    >
                                                                                        <el-menu-item
                                                                                            :index="i+'-'+index+'-'+subIndex+'-'+third_grade_subIndex+'-'+fourth_grade_subIndex+'-'+fifth_grade_subIndex"
                                                                                            :key="i+'-'+index+'-'+subIndex+'-'+third_grade_subIndex+'-'+fourth_grade_subIndex+'-'+fifth_grade_subIndex"
                                                                                        >
                                                                                            <router-link
                                                                                                :to="fifth_grade_item.urlPath ? fifth_grade_item.urlPath : ''"
                                                                                            >{{
                                                                                            language=='en'?fifth_grade_item.authNameEn:fifth_grade_item.authNameCh }}</router-link>
                                                                                        </el-menu-item>
                                                                                    </template>
                                                                                </el-submenu>
                                                                            </div>
                                                                        </template>
                                                                    </template>
                                                                </el-submenu>
                                                            </div>
                                                        </template>
                                                    </template>
                                                </el-submenu>
                                            </div>
                                        </template>
                                    </template>
                                </el-submenu>
                            </div>
                        </template>
                    </template>
                </el-menu>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script>
import { findAllInfoAuthByUserId } from 'common/src/api/user'
import { findStudentCultureRelById } from 'common/src/api/culture/culturePlan'
import { currentAuthId, checkVerCode } from 'common/src/api/session'
import { MenuItem } from 'element-ui'
export default {
    name: 'LeftMenu',
    props: ['menus'],
    data() {
        return {
            menuDialog: {
                isShow: false,
                keyWord: '', // 手机验证码
                title: '',
                errMessage: ''
            }
        }
    },
    computed: {
        language() {
            return this.$store.getters.language
        }
    },
    watch: {
        $route: {
            handler: function() {
                const authInfo = this.$store.state.session.menuItemAuthInfo
                if (authInfo && authInfo.activeState == 1) {
                    this.menuDialog.isShow = true
                    if (!authInfo.belongToRange) {
                        this.menuDialog.title = '提示'
                    } else {
                        this.menuDialog.title = '请输入手机验证码'
                        this.menuDialog.errMessage = ''
                        this.menuDialog.keyWord = ''
                    }
                } else {
                    this.menuDialog.isShow = false
                }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        findStudentId() {
            if (
                this.$store.state.session &&
                this.$store.state.session.mockUser
            ) {
                this.studentId = this.$store.state.session.mockUser.uid
                this.getTemplateId(this.studentId)
            } else {
                this.$router.push({
                    path: `/personalPlanDetail/id`
                })
            }
        },
        getTemplateId(id) {
            findStudentCultureRelById(id).then(res => {
                if (res.code == 200) {
                    this.$router.push({
                        path: `/personalPlanDetail/${this.studentId}`,
                        query: {
                            templateId: res.data.cultureId
                        }
                    })
                }
            })
        },
        closeDialog() {
            this.$refs.EduDialog.close()
            this.menuDialog.keyWord = ''
        },
        confirmForm() {
            const _this = this
            this.$refs['menuDialog'].validate((valid) => {
                if (valid) {
                    checkVerCode(this.menuDialog.keyWord, this.$store.state.session.menuItemAuthInfo.currentAuthId).then(({ code, data, msg }) => {
                        if (code == 200) {
                            this.$message({
                                type: 'success',
                                message: '验证成功'
                            })
                            this.menuDialog.isShow = false
                            this.menuDialog.keyWord = ''
                        } else {
                            this.menuDialog.errMessage = msg
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.el-menu-item a {
    font-size: 14px;
    color: #8896a7;
}
.el-menu-item a:hover {
    color: #3a7fe8;
}

.icon-image {
    vertical-align: middle;
    margin: 0 0 0 16px;
    width: 18px;
    height: 18px;
}
.menu-collapse {
    width: 240px;
    overflow: hidden;
}
::v-deep .el-collapse-item__header{
    padding:5px 0;
    min-height: 48px;
    height: auto;
    word-break: break-all;
}
.vdialog {
    ::v-deep {
        .el-dialog{
            min-width: 400px;
        }
        .v-modal{
          width: 87vw;
          height: 87vh;
          right:auto;
          bottom:auto;
          left: 250px;
          top: 110px;
          border-radius: 4px;
        }
        .el-dialog__wrapper{
            top: auto;
            left: auto;
            right: 28%;
            bottom: 28%;
        }
    }
}
</style>
